<template>
    <div class="business_interests">
        <div class="common_header">
            <div class="header-img"><img src="../assets/imgs/nav_bar_return@2x.png" alt="" @click="$router.go(-1)">
            </div>
            <div class="header-title">商业兴趣</div>
        </div>
        <div class="content">
            <div class="content_pian">
                <div class="content_title">搜索偏好</div>
                <div id="tendency"></div>
            </div>
            <div class="content_pian">
                <div class="content_title">年度游客消费水平</div>
                <div class="consumption_level">
                    <div class="consumption_biao">
                        <div id="low"></div>
                        <div class="name">低消费</div>
                    </div>
                    <div class="consumption_biao">
                        <div id="centre"></div>
                        <div class="name">中消费</div>
                    </div>
                    <div class="consumption_biao">
                        <div id="tall"></div>
                        <div class="name">高消费</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from 'echarts';
    import {Notify} from 'vant';

    export default {
        name: "businessInterests",
        components: {
            [Notify.name]: Notify
        },
        data() {
            return {
                tr_id: ''
            }
        },
        mounted() {
            this.tr_id = localStorage.getItem('tr_id');
            this.getALLData(['information']);
            // this.businessInterests();
            this.lowConsumption();
            this.centreConsumption();
            this.tallConsumption();
        },
        methods: {
            getALLData(arg) {
                // this.$store.commit('showLoading');
                this.$http.get('dddd?tr_id=' + this.tr_id, {
                    params: {
                        "@action": arg.join(',')
                    }
                })
                    .then((result) => {
                        if (result.status_code == 200) {
                            this.information(result.data.information);
                        } else {
                            Notify({
                                message: result.msg,
                                duration: 1000,
                                background: '#ff0000'
                            })
                        }

                        // this.$store.commit('hideLoading');
                    })
                    .catch((err) => {
                        // this.$store.commit('hideLoading');
                        Notify({
                            message: err.data.msg || "数据异常，请重试",
                            duration: 1000,
                            background: '#ff0000'
                        })
                    })
            },
            information(data) {
                for (let i = 0; i < Object.keys(data).length; i++) {
                    if (Object.keys(data)[i] == '用户兴趣') {
                        this.businessInterests(data.用户兴趣);
                    }
                }
            },
            businessInterests(data) {
                // let data = [
                //     {'特征': '成都市adfadfasdfasdf', '占比': '90%'},
                //     {'特征': '成都dfasfasd市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '成都市', '占比': '90%'},
                //     {'特征': '北京市', '占比': '35%'},
                //     {'特征': '山东', '占比': '50%'},
                //     {'特征': '江苏', '占比': '40%'},
                //     {'特征': '上海市', '占比': '20%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                //     {'特征': '台湾', '占比': '10%'},
                // ];
                let color = [
                    ['rgba(0,208,207,0)', 'rgba(0,208,207,1)'],
                    ['rgba(255,144,78,0)', 'rgba(255,144,78,1)'],
                    ['rgba(47,125,255,0)', 'rgba(47,125,255,1)'],
                    ['rgba(139,59,255,0)', 'rgba(139,59,255,1)'],
                    ['rgba(223,9,237,0)', 'rgba(223,9,237,1)'],
                    ['rgba(107,237,9,0)', 'rgba(107,237,9,1)'],
                    ['rgba(241,81,101,0)', 'rgba(241,81,101,1)'],
                    ['rgba(113,255,213,0)', 'rgba(113,255,213,1)'],
                    ['rgba(33,11,126,0)', 'rgba(33,11,126,1)'],
                    ['rgba(143,134,184,0)', 'rgba(143,134,184,1)'],
                    ['rgba(248,5,243,0)', 'rgba(248,5,243,1)'],
                    ['rgba(174,27,103,0)', 'rgba(174,27,103,1)'],
                    ['rgba(164,201,202,0)', 'rgba(164,201,202,1)'],
                    ['rgba(168,164,202,0)', 'rgba(168,164,202,1)'],
                    ['rgba(246,193,15,0)', 'rgba(246,193,15,1)'],
                    ['rgba(149,246,15,0)', 'rgba(149,246,15,1)'],
                    ['rgba(80,248,106,0)', 'rgba(80,248,106,1)'],
                    ['rgba(80,242,248,0)', 'rgba(80,242,248,1)'],
                    ['rgba(248,216,8,0)', 'rgba(248,216,8,1)'],
                    ['rgba(142,235,187,0)', 'rgba(142,235,187,1)'],
                    ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
                    ['rgba(180,167,810)', 'rgba(180,167,81,1)'],
                    ['rgba(248,243,210,0)', 'rgba(248,243,210,1)'],
                    ['rgba(223,248,210,0)', 'rgba(223,248,210,1)'],
                    ['rgba(215,168,112,0)', 'rgba(215,168,112,1)'],
                    ['rgba(241,133,8,0)', 'rgba(241,133,8,1)'],
                    ['rgba(237,23,9,0)', 'rgba(237,23,9,1)'],
                    ['rgba(157,130,99,0)', 'rgba(157,130,99,1)']

                ];
                let yAxisData = [], seriesData = [];
                let compare = function (obj1, obj2) {
                    let val1 = Number(obj1.占比.replace('%', ''));
                    let val2 =  Number(obj2.占比.replace('%', ''));
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
                let arrData = data.sort(compare); //数组对象从小到大排序，使用reverse()方法颠倒排序
                for (let i = 0; i < arrData.length; i++) {
                    yAxisData.push(data[i].特征);
                    seriesData.push(data[i].占比.replace('%', ''));
                }
                let myChart = echarts.init(document.getElementById('tendency'));
                let option = {
                    tooltip: {
                        show: true,
                        formatter: "{b} <br> {c}%"

                    },
                    grid: {
                        top: 0,
                        bottom: 40,
                        x: 60
                    },
                    xAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            show: false,
                            color: '#EBEDF4'
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        // data: ['美食订单订单', '购物', '门票', '交通', '娱乐', '门票', '交通', '娱乐'],
                        data: yAxisData,
                        // minInterval: 1,
                        axisTick: {
                            // color:'#fff',
                            show: false,
                        },
                        axisLine: {
                            //  color:'#fff',
                            show: true,
                            lineStyle: {
                                color: '#EBEDF4'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#747FA1',
                                fontSize: 12
                            },
                            interval: 0,
                            formatter: function (value) {
                                if (value.length > 4) {
                                    if (value.length > 9) {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 7)}...`;
                                    } else {
                                        return `${value.substring(0, 4)}\n${value.substring(4, 9)}`;
                                    }
                                } else {
                                    return value;
                                }
                            }
                        }

                    }],
                    series: [{
                        name: '景点排行',
                        type: 'bar',
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}%',
                                textStyle: {
                                    color: '#747FA1',
                                    fontSize: '12'
                                }
                            }
                        },
                        data: []
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                for (let j1 = 0; j1 < seriesData.length; j1++) {
                    option.series[0].data.push({
                        value: seriesData[j1],
                        name: yAxisData[j1],
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 10, 10, 0],
                                color: {
                                    type: 'bar',
                                    colorStops: [{
                                        offset: 0,
                                        color: color[j1][1] // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: color[j1][1] // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false

                                }
                            }
                        }
                    });
                }
                myChart.setOption(option);
                let autoHeight = data.length * 30 + 50;
                myChart.getDom().style.height = autoHeight + "px";
                myChart.resize();
            }, // 搜索偏好
            lowConsumption() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('low'));
                // let shadowColor = '#374b86';
                let option = {
                    title: {
                        text: 20 + '%',
                        left: 'center',
                        top: 'center', //top待调整
                        textStyle: {
                            color: '#282C34',
                            fontSize: 16,
                            fontFamily: 'sans-serif'
                        }
                    },
                    series: [{
                        name: 'pie1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['70%', '80%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: 47,
                            name: 'completed',
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: {
                                        colorStops: [{
                                            offset: 0,
                                            color: '#F07D17' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#FFAE12' // 100% 处的颜色
                                        }]
                                    },
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#F07D17' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#FFAE12' // 100% 处的颜色
                                        }]
                                    },
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: 'gap',
                            value: 100 - 47,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    color: '#EBEDF4',
                                    borderColor: '#EBEDF4',
                                    borderWidth: 2
                                }
                            }
                        }]
                    }]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }, // 低消费
            centreConsumption() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('centre'));
                // let shadowColor = '#374b86';
                let option = {
                    title: {
                        text: 38 + '%',
                        left: 'center',
                        top: 'center', //top待调整
                        textStyle: {
                            color: '#282C34',
                            fontSize: 16,
                            fontFamily: 'sans-serif'
                        }
                    },
                    series: [{
                        name: 'pie1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['70%', '80%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: 38,
                            name: 'completed',
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: {
                                        colorStops: [{
                                            offset: 0,
                                            color: '#009FFF' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#4500FF' // 100% 处的颜色
                                        }]
                                    },
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#009FFF' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#4500FF' // 100% 处的颜色
                                        }]
                                    },
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: 'gap',
                            value: 100 - 38,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    color: '#EBEDF4',
                                    borderColor: '#EBEDF4',
                                    borderWidth: 2
                                }
                            }
                        }]
                    }]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }, // 中消费
            tallConsumption() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('tall'));
                // let shadowColor = '#374b86';
                let option = {
                    title: {
                        text: 60 + '%',
                        left: 'center',
                        top: 'center', //top待调整
                        textStyle: {
                            color: '#282C34',
                            fontSize: 16,
                            fontFamily: 'sans-serif'
                        }
                    },
                    series: [{
                        name: 'pie1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['70%', '80%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: 60,
                            name: 'completed',
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: {
                                        colorStops: [{
                                            offset: 0,
                                            color: '#E10B25' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#F15165' // 100% 处的颜色
                                        }]
                                    },
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#E10B25' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#F15165' // 100% 处的颜色
                                        }]
                                    },
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                }
                            }
                        }, {
                            name: 'gap',
                            value: 100 - 60,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    color: '#EBEDF4',
                                    borderColor: '#EBEDF4',
                                    borderWidth: 2
                                }
                            }
                        }]
                    }]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            } // 高消费
        }
    }
</script>
<style scoped lang="less">
    .business_interests {
        padding: 1.2rem 0 0.34rem;
    }

    .content_pian {
        width: 3.43rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.08rem 0.4rem 0rem rgba(119, 136, 175, 0.2);
        border-radius: 0.08rem;
        margin: 0.2rem auto 0;
        padding-bottom: 0.2rem;
        .content_title {
            padding: 0.2rem 0 0.2rem 0.16rem;
            font-size: 0.15rem;
            font-weight: bold;
            color: rgba(40, 44, 52, 1);
            line-height: 0.16rem;
        }
        .consumption_level {
            display: flex;
            justify-content: space-around;
        }
        .consumption_biao {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .name {
                font-size: 0.12rem;
                color: rgba(116, 127, 161, 1);
                line-height: 0.12rem;
                padding-top: 0.12rem;
            }
        }
        #tendency {
            width: 3.43rem;
        }
        #low {
            width: 1rem;
            min-height: 1rem;
        }
        #tall {
            width: 1rem;
            min-height: 1rem;
        }
        #centre {
            width: 1rem;
            min-height: 1rem;
        }
    }

    #consumption_level {
        margin: 0.2rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.08rem 0.4rem 0rem rgba(119, 136, 175, 0.2);
        border-radius: 0.08rem;
    }
</style>